<template>
    <div :class="[{userMobile:base.isMobile},{userPic:!base.isMobile},{active:base.isShowLeft},{disable:base.guideIndex == 5 && !base.isMobile},'userBox']" @click="getclick($event)">
        <div @mouseenter="showInfo" @mouseleave="hideInfo($event)" v-if="!base.isMobile" :class="[{active:base.isShowUer || base.isShowfeed || base.isActivefeed},'userInfo']" @click.stop="showInfo">
            <div class="pic">
                <img v-if="userInfo?.avatar" :src="`${baseurl}${userInfo?.avatar}`"/>
                <img v-else :src="`${imgurl}pic.jpg`"/>
            </div>
            <div class="name">Hi<span class="tell">{{ maskedPhone(userInfo?.phone) }}</span></div>
            <div class="redicon" v-if="messageListStore.merberInfoSt.companymessagecount>0 || messageListStore.merberInfoSt.messagecount>0" >new</div>
        </div>
        <div @mouseenter="showInfo" @mouseleave="hideInfo($event)" class="mobilePic" @click="showInfo" v-if="base.isMobile">
            <div class="pic">
                <img v-if="userInfo?.avatar" :src="`${baseurl}${userInfo?.avatar}`"/>
                <img v-else :src="`${imgurl}pic.jpg`"/>
            </div>
        </div>
        <div class="bg" v-if="base.isMobile && base.isShowUer" @click="openInfo"></div>
        <div 
            class="animate__fadeIn animate__animated infoBox" 
            v-if="base.isShowUer || base.isShowfeed || base.isActivefeed"
			@mouseenter ="showInfo"
			@mouseleave="hideInfo($event)">
            <div class="clumn">
                <span class="tell" v-if="base.isMobile">{{ maskedPhone(userInfo?.phone) }}</span>
                <div class="rate flexC">
                    <span class="num">{{ integral }}</span>
                    <span class="mate flexC">积分</span>
                </div>
                <span class="btn" @click="toIntegral">积分兑换</span>
                <span class="mark">【反馈内容获取积分】</span>
            </div>
            <ul class="infoList" v-if="base.guideIndex != 0">
                <li class="guanwang disable">丝网AI官网</li>
                <li class="geren disable">个人信息</li>
                <li class="jiaoxue disable">新手指引</li>
                <li class="gongneng disable">功能反馈</li>
                <li class="xiaoxi disable">消息中心</li>
                <li class="qiyexiaoxi disable" v-if="messageListStore.merberInfoSt.iscompany == 1 ">企业中心</li>
                <li class="out disable">退出登录</li>
            </ul>
            <ul class="infoList" v-else>
                <li class="guanwang"><a target="_blank" href="https://wireai.com/">丝网AI官网</a></li>
                <li class="geren" @click="toUser">个人信息</li>
                <li class="jiaoxue" @click="getGuide">新手指引</li>
                <li class="gongneng" @click.stop="showfeed">功能反馈</li>
                <li class="xiaoxi" @click="openMessage(1)">消息中心
                    <div class="redicon" v-if="messageListStore.merberInfoSt.messagecount>0">{{messageListStore.merberInfoSt.messagecount}}</div>
                </li>
                <li class="qiyexiaoxi" v-if="messageListStore.merberInfoSt.iscompany == 1 "  @click="openMessage(2)">
                    企业中心
                    <div class="redicon" v-if="messageListStore.merberInfoSt.companymessagecount>0">{{messageListStore.merberInfoSt.companymessagecount}}</div>
                </li>
                <li class="out" @click.stop="logOut">退出登录</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang='ts'>
	import { useSystemStore } from "@/store/modules/system";
	import { useUserStore } from "@/store/modules/user";
    import { useMessageListStore } from "@/store/modules/messagelist";
    import { useRouter,useRoute } from 'vue-router';
    import pdfapi from "@/api/pdf.ts"
    const router = useRouter();
    const api = inject('$base', null as any);
	const $_ = inject('$_', null as any);
    const imgurl = import.meta.env.VITE_APP_TITLE+'/assets/images/';
	const base = useSystemStore();
    const userInfo = useUserStore();
    const messageListStore =useMessageListStore();
    const integral = ref<number>();
    const width = window.innerWidth;
	const timer = ref(null);
    const baseurl = inject('$baseurl', null as any);
    
    function toUser(){
        console.log('999999955555555555')
        window.open(router.resolve({ path: '/member' }).href, '_blank');
    }
    function showInfo(){
        base.isShowUer = true;
		clearTimeout(timer.value);
    }
	function getclick(e:event){
		e.stopPropagation();
	}
    function hideInfo(e){
		e.stopPropagation();
		timer.value = setTimeout(()=>{
			base.isShowUer = false;
		},200);
    }
    function openInfo(){
        base.isShowUer = !base.isShowUer;
    }
    function showfeed(){
        base.isShowfeed = true;
    }
    function logOut(){
        localStorage.clear();
        location.reload();
    }
    function maskedPhone(number:string) {
		if(number){
			const maskedMiddle = number.substring(3, 7).replace(/\d/g, '*');
			return number.substring(0,3) + maskedMiddle + number.substring(7);
		}  
    }
    function toIntegral(){
        window.open(router.resolve({ path: '/shop' }).href, '_blank');
    }
    function memberinfo(){
        api.memberinfo({ id : userInfo.userIds }).then(res=>{
            integral.value = res.data.integral;
            userInfo.avatar = res.data.headimg;
            userInfo.userCon = res.data;
			if(res.data.helpstatus == 0){
				base.isShowGuide = true;
                base.guideIndex = 1;
			}
        })
    }
    function openMessage(type:number){
        base.isMessageType = type
    }
	function getGuide(){
		base.guideIndex = 1;
		base.isShowGuide = true;
        base.isActivefeed = false;
        base.isShowUer = false;
        base.isShowfeed = false;
        base.isNewSess = true;
		base.listpage = 1;
        base.inSessionId = 0;
		base.isRegin = false;
		base.isEnterLoad = false;
		base.isShowNav = false;

	}
    // 每10秒执行一次
    function initgetmembermessage(){
        pdfapi.getmembermessage({
            id:userInfo.userIds
        }).then((res)=>{
            messageListStore.merberInfoSt = res.data
            console.log(res)
        })
    }
    onMounted(()=>{
		memberinfo();
        initgetmembermessage();
        const width = window.innerWidth;
        if(width <= 768){
            base.isMobile = true;
        }
        window.addEventListener('resize', function(){
			const width = window.innerWidth;
			if(width <= 768){
				base.isMobile = true;
			}else{
				base.isMobile = false;
			}
		});
        window.addEventListener('click', handleClickOutside);

    })
    function handleClickOutside(){
        base.isShowUer = false;
    }
</script>
<style lang="scss" scoped>
.userBox{
    position:fixed;
    background:#f8f9fa;
    width:280px;
    height:auto;
    box-sizing:border-box;
    z-index:99;
    transition:all .8s;
    font-family:'siyuanR';
    .bg{
        position: fixed;
        left: 0;
        top:0;
        width: 100%;
        height: 100%;
    }
	&.disable{
		z-index: 999;
		background: none;
	}
    &.active{
        width:0;
        overflow:hidden;
        opacity:0;
    }
    .infoBox{
        width:264px;
        position:absolute;
        background:url(../../assets/images/userBg.png) no-repeat center -10px #fcfdfe;
        background-size:100% auto;
        box-shadow:0 0 7px rgba(166,182,229,.64);
        border-radius:10px;
        z-index: 99;
        .clumn{
            height:40px;
            width:100%;
            display:flex;
            justify-content:space-between;
            align-items:center;
            padding:0 10px 0 20px;
            position:relative;
            cursor:pointer;
            &:hover{
                .mark{
                    display:block;
                }
            }
            .mark{
                position:absolute;
                background:#ffffff;
                color:#64b4fe;
                font-size:12px;
                line-height:26px;
                top:-36px;
                left:0;
                display:none;
                box-shadow:0 0 7px rgba(166,182,229,.64);
                border-radius:5px;
                padding:0 10px;
                &::after{
                    width: 0;
                    height: 0;
                    border-left: 8px solid transparent;
                    border-right: 8px solid transparent;
                    border-top: 10px solid #fff;
                    position:absolute;
                    bottom:-5px;
                    content:'';
                    left:50%;
                    transform:translateX(-50%);
                }
            }
            .rate{
                color:#fff;
                height:100%;
                font-size:24px;
                display:inline-block;
                .num{
                    display:inline-block;
                    font-style:normal;
                    font-size:24px;
                    float:left;
                }
                .mate{
                    font-size:13px;
                    margin:0 5px;
					background:url(../../assets/images/icon_ts.png) no-repeat right center;
					background-size:12px 12px;
					padding-right:17px;
                    height:100%;
                    float:left;
                }
            }
            .btn{
                height:22px;
                background:#faeedc;
                color:#9e6d47;
                font-size:10px;
                border-radius:10px;
                padding:0 8px;
                line-height:22px;
                cursor:pointer;
            }
        }
    }
    &.userPic{
        left:0;
        bottom:0;
        padding:5px 8px;
        .infoBox{
            bottom:90px;
        }
    }  
    .infoList{
        width:100%;
        font-size:13px;
        color:#666;
        li{
            padding:0 20px;
            line-height:35px;
            cursor:pointer;
            transition:all .5s;
            position:relative;
            overflow:hidden;
            &.guanwang{
                &::before{
                    background:url(../../assets/images/icon11.png) no-repeat left center;
                    background-size:13px 13px;
                }
            }
            &.jiaoxue{
                &::before{
                    background:url(../../assets/images/icon12.png) no-repeat left center;
                    background-size:14px 12px;
                }
            }
            &.gongneng{
                &::before{
                    background:url(../../assets/images/icon3.png) no-repeat left center;
                    background-size:12px 14px;
                }
            }
            &.geren{
                &::before{
                    background:url(../../assets/images/icon14.png) no-repeat left center;
                    background-size:13px 13px;
                }
            }
            &.out{
                &::before{
                    background:url(../../assets/images/icon10.png) no-repeat left center;
                    background-size:13px 11px;
                }
            }
            &.xiaoxi{
                &::before{
                    background:url(../../assets/miscel/icon08.png) no-repeat left center;
                    background-size:13px 11px;
                }
            }
            &.qiyexiaoxi{
                &::before{
                    background:url(../../assets/miscel/icon09.png) no-repeat left center;
                    background-size:13px 11px;
                }
            }
            
            

            &::before{
                width:15px;
                height:15px;
                position:absolute;
                left:-20px;
                top:50%;
                transform:translateY(-50%);
                content:'';
                transition:all .5s;
            }
            &:hover:not(.disable),&.acitve{
                background:#eff1fd;
                padding-left:36px;
                color:#2379f7;
                &::before{
                    left:18px;
                }
            }
            .redicon{
                min-width: 18px;
                height: 18px;
                background: #fb7279;
                border-radius: 15px;
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translate(0,-50%);
                font-size: 12px;
                line-height: 18px;
                color: #ffffff;
                text-align: center;
                padding: 0 4px;
                box-sizing: border-box;
            }
        }
    }
}
.userInfo{
    width:100%;
    height:75px;
    display:flex;
    align-items:center;
    padding: 10px;
    border-radius:5px;
    position:relative;
    cursor:pointer;
	overflow: hidden;
	&::before{
		position: absolute;
		content: '';
		left:2px;
		top:2px;
		width: calc(100% - 4px);
		height: calc(100% - 4px);
		border-radius:5px;
		
		background-image: linear-gradient(to bottom, #8fdadd, #89b1f5);
		transition: all .6s;
		opacity: 0;
	}
	&::after{
	    content:'';
	    position: absolute;
	    background:#f8f9fa;
	    left:0;
	    top:0;
	    width:100%;
	    height:100%;
	    border-radius:6px;
	    transition:all .6s;
	}
	&:hover,&.active{
		box-shadow:3px 5px 7px rgba(166,182,229,.19);
		&::before{
			left:0;
			top:0;
			width:100%;
			height:100%;
			opacity: 1;
		}
		&::after{
		    left:2px;
		    top:2px;
		    width:calc(100% - 4px);
		    height:calc(100% - 4px);
		}
		.pic{
		    border:solid 1px #82adfc;
		}
	}
    .pic{
        position:relative;
        z-index:10;
        width:33px;
        height:33px;
        border:solid 1px #abc7fa;
        border-radius:50%;
        overflow:hidden;
        img{
            width:100%;
            height:100%;
            object-fit:cover;
            border:solid 1px #bad4f9;
            border-radius:50%;
        }
    }
    .name{
        flex:1;
        padding:0 10px;
        font-size:13px;
        color:#666;
        position:relative;
        z-index:10;
        .tell{
            color:#2379f7;
            padding-left:5px;
        }
    }
    .redicon{
        min-width: 18px;
        height: 18px;
        background: #fb7279;
        border-radius: 15px;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translate(0,-50%);
        font-size: 12px;
        line-height: 16px;
        color: #ffffff;
        text-align: center;
        padding: 0 4px;
        box-sizing: border-box;
        z-index: 11;
    }
    
}
@media screen and (max-width: 768px) {
    .userBox{
        &.userMobile{
            width:34px;
            right:10px;
            top:7px;
			transition:none;
            .mobilePic{
                width:30px;
                height:30px;
                border-radius:50%;
                overflow:hidden;
                border:solid 1px #82adfc;
                cursor:pointer;
                position: relative;
                z-index:999;
                img{
                    width:100%;
                    height:100%;
                    object-fit:cover;
                    border-radius:50%;
                    border:solid 1px #bad4f9;
                }
            }
            .infoBox{
                background:url(../../assets/images/userBg.png) no-repeat center top #fcfdfe;
                background-size:100% auto;
                top:50px;
                right:0;
                .clumn{
                    height:50px;
                    position:relative;
                    padding-top:15px;
                    .tell{
                        position:absolute;
                        top:5px;
                        color:#fff;
                        font-size:12px;
                        left:20px;
                    }
                    .rate{
                        font-size:20px;
                    }
                }
            }
        }
        .infoList{
            li{
                padding-left:36px;
                &.guanwang{
                    background:url(../../assets/images/icon011.png) no-repeat 16px center;
                    background-size:13px 13px;
                }
				&.geren{
				    background:url(../../assets/images/icon014.png) no-repeat 16px center;
				    background-size:13px 13px;
				}
				
                &.jiaoxue{
                    background:url(../../assets/images/icon012.png) no-repeat 16px center;
                    background-size:14px 12px;
                }
                &.gongneng{
                    background:url(../../assets/images/icon03.png) no-repeat 16px center;
                    background-size:12px 14px;
                }
                &.out{
                    background:url(../../assets/images/icon010.png) no-repeat 16px center;
                    background-size:13px 11px;
                }
                &.xiaoxi{
                    background:url(../../assets/miscel/icon8.png) no-repeat 16px center;
                    background-size:14px 14px;
                }
                &.qiyexiaoxi{
                    background:url(../../assets/miscel/icon9.png) no-repeat 16px center;
                    background-size:13px 13px;
                }
                
                &::before{
                    display:none;
                }
            }
        }
    }
}
</style>
